<template>
  <div class="fly-box" :ref="refName">
    <svg :width="widthRef" :height="heightRef">
      <!--  

        M
            移动到的点的x轴和y轴的坐标
        L
            需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
        H
            绘制平行线
        V
            绘制垂直线
        Z
            从当前点画一条直线到路径的起点

        M5 5     M5 距离X 5像素  5 距离 Y 5像素
        d="M5 5 L395 5 L395 395 L5 395 Z"
      -->
      <defs>
        <path :id="pathId" :d="pathRef" fill="none" />

        <!--cx cy 外圈的投射点  fx fy 内圈  -->
        <radialGradient
          :id="gradienId"
          cx="50%"
          cy="50%"
          fx="100%"
          fy="50%"
          r="50%"
        >
          <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
          <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
        </radialGradient>
        <mask :id="maskId">
          <circle :r="starLineth" cx="0" cy="0" :fill="`url(#${gradienId})`">
            <animateMotion
              :dur="`${dur}s`"
              :path="pathRef"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>
      </defs>
      <use :href="`#${pathId}`" stroke-width="1" :stroke="lineColor" />
      <use
        :href="`#${pathId}`"
        stroke-width="3"
        :stroke="starColor"
        :mask="`url(#${maskId})`"
      />
    </svg>
    <div class="fly-box-content">
      <slot> </slot>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, getCurrentInstance,defineComponent  } from "vue";
import { v4 as uuidv4 } from "uuid";
export default defineComponent({
  name: "FlyBox",
  props: {
    lineColor: {
      type: String,
      default: "#235fa7",
    },
    starColor: {
      type: String,
      default: "#4fd2dd",
    },
    starLineth: {
      // 圆心半径
      type: [String, Number],
      default: "50",
    },
    dur: {
      // 流星的动画速度
      type: [Number, String],
      default: 1.5,
    },
  },
  setup() {
    const uuid = uuidv4();

    const widthRef = ref(0);
    const heightRef = ref(0);
    const refName = "flyBox";
    const pathId = `${refName}-path-${uuid}`;
    const gradienId = `${refName}-gradien-${uuid}`;
    const maskId = `${refName}-mask-${uuid}`;
    const pathRef = computed(
      () =>
        `M5 5 L${widthRef.value - 5} 5 L${widthRef.value - 5} ${
          heightRef.value - 5
        } L5 ${heightRef.value - 5} Z`
    );

    const init = () => {
      const instance = getCurrentInstance();
      const dom = instance.ctx.$refs[refName];
      widthRef.value = dom.clientWidth;
      heightRef.value = dom.clientHeight;
    };

    onMounted(() => {
      init();
    });
    return {
      widthRef,
      heightRef,
      pathRef,
      refName,
      pathId,
      gradienId,
      maskId,
    };
  },
});
</script>

<style lang="scss" scoped>
.fly-box {
  position: relative;
  width: 100%;
  height: 100%;

  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .fly-box-content {
    width: 100%;
    height: 100%;
    padding: 2px;
    box-sizing: border-box;
  }
}
</style>